<template>
    <div id="home">
      <!-- 头部 -->
        <mt-header fixed title="首页">
            <router-link v-if="!uname" to="/login" slot="right">
                <mt-button>登陆</mt-button>
            </router-link>

            <mt-button v-else icon="more" slot="right" @click="() =>{ actionShow = true}"></mt-button>
        </mt-header>

        
        <div class="home-menu">
            <!-- 搜索按钮 -->
            <div class="music-seach-input">
                    <input type="seach" placeholder="搜索商店" v-model="key" @keyup.enter="seachShop">
                    <p class="music-seach-btn" @click="seachShop">搜索</p>
            </div>
            <!-- 九宫格 -->
            <div class="grids">
                <div class="view" v-for="(val, index) in gridList" :key="index">
                    <img :src="val.imgLink">
                    <span>{{val.title}}</span>
                </div>
            </div>
        </div>

        <div class="home-content" v-getH='350'>
            <div class="home-show">
                <!-- 商品展示 -->
                <div class="shop-title">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuyao"></use>
                    </svg>
                    <span>最新小白商店</span>
                </div>
                <div class="shop" ref="shopItems" v-getH='385'>
                    <ul>
                        <li v-for="(item, index) in homeShopList" :key="index">
                            <!-- 店铺图片 -->
                            <div class="item-img">
                                <img :src="item.shopBgc">
                            </div>
                            <!-- 店铺信息 -->
                            <div class="item-info">
                                <div class="info-name">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-biaoti"></use>
                                    </svg>
                                    <span>{{ item.sname}}</span>                                  
                                </div>
                                <div class="info-address"> 
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-dizhi"></use>
                                    </svg>                      
                                    <span class="info-name">地址：{{item.shopAddress}}</span>
                                </div>
                                <div class="info-xing"> 
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-zhishu"></use>
                                    </svg>                      
                                    <span class="info-num">推荐指数：
                                        <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-tuijianzhishu"></use>
                                        </svg> 
                                         <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-tuijianzhishu"></use>
                                        </svg> 
                                         <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-tuijianzhishu"></use>
                                        </svg> 
                                    </span>
                                </div>                                 
                            </div>
                            <!-- 点击进入商家店铺 -->
                            <div class="item-click" @click="toShop(index)">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-fanhuishouyeicon"></use>
                                </svg> 
                                <span>
                                    点击进入
                                </span>
                            </div>
                        </li>
                        
                        <!-- 底部显示没有更多的了 -->
                        <li>
                           <div>
                               <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-beishang"></use>
                                </svg>
                                <span>&nbsp;没有更多了</span>
                           </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 搜索商品展示 -->
            <div class="home-seach-seach">

            </div>
        </div>
      <mt-actionsheet
        :actions="headerList"
        v-model="actionShow">
      </mt-actionsheet>
    </div>
</template>
<script>


import { mapState, mapMutations, mapActions} from 'vuex'
import { MessageBox} from 'mint-ui'
import Bscroll from 'better-scroll'
export default {
    data(){
        return {
            //搜索关键字
            key: '',
            gridList:[
                {title: '美食',imgLink: require('../../lib/img/icons/grid-01.png')},
                {title: '家具',imgLink: require('../../lib/img/icons/grid-02.png')},
                {title: "衣服",imgLink: require('../../lib/img/icons/grid-03.png')},
                {title: '房子',imgLink: require('../../lib/img/icons/grid-04.png')},
                {title: '电子',imgLink: require('../../lib/img/icons/grid-05.png')},
                {title: '书本',imgLink: require('../../lib/img/icons/grid-06.png')}
            ],
            actionShow: false,
            headerList:[
                {name: '退出登录', method: this.logoutT}
            ]
        }
    },
    created(){
        this.key = this.keyWord
        if(!this.keyWord){
            this.getHome()
        }
        //内容区域滚动
        this.$nextTick(() =>{
            this.scrollItem = new Bscroll(this.$refs.shopItems, {
                click: true
            })
        })
        
    },
    inject:['reload'],
    computed:{
       ...mapState([
           'myCouponMenu',
           'showTab',
           'uname',
           'homeShopList',
           'keyWord'
       ])
    },
    watch:{
        key(val, oldVal){
            this.setState({keyWord: val})
            if(!val){
                this.getHome(this.reload)
            }
        }
    },
    methods: {
        ...mapMutations([
            'setState',
            'logout',
            'setToast',
            'setIndicator'
        ]),

        ...mapActions([
            'getHome',
            'getSeach'
        ]),
        //搜索商品
        seachShop(){

            //判断有没有关键字
            if(!this.keyWord) return this.setToast('请输入关键字')
            this.setIndicator('正在搜索')
            this.getSeach({sname: this.keyWord, reload: this.reload})
        
        },

        //前往某个 商店 进行点餐
        toShop(index){
            this.$router.push({name: 'food', params: {index, home: true}})
        },
        //退出登陆
        logoutT(){

           this.logout({router: this.$router, reload: this.reload})
        }
    },

    //指令
    directives:{
        getH:{
            inserted: function (el, binding) {
                el.style.height = document.querySelector('html').clientHeight - binding.value + 'px'
            }
        }
    }
}
</script>

<style lang="less" scoped>
    #home{
        max-width: 1280px;
        height: 100%;
        overflow: hidden;
        .home-header{
            position: relative;
            width: 100%;
            text-align: center;
            background-color: #49CB5F;
            .login{
                position: absolute;
                top: 0;
                right: 10px;
                height: 100%;
                line-height:45px;
                a{
                    color: #fff;
                }
            }
        }
        .home-menu{
            position: fixed;
            top: 40px;
            height: 250px;
            //搜索框
            .music-seach-input{
                width: 100%;
                height: 30px;
                margin: 20px 0;
                box-sizing: border-box;
                display: flex;
                z-index: 10;
                > input{
                    flex: 4;
                    height: 100%;
                    text-indent: 20px;
                    opacity: 0.7;
                    // background-color: #9DDBE2;
                }
                > .music-seach-btn{
                    flex: 2;
                    height: 34px;//input边框2px
                    text-align: center;
                    line-height: 30px;
                    margin: 0;
                    background: #2BA2FA;
                    color: #fff;
                    opacity: 0.7;
                }
            }
            //九宫格
            .grids{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                border-top: 1px solid #ccc;
                border-left: 1px solid #ccc;
                height: 175px;
                > div{
                    display: flex;
                    width: 33.333%;
                    max-height: 100px;
                    box-sizing: border-box;
                    flex-direction: column;
                    align-items: center;
                    border-right: 1px solid #ccc;
                    border-bottom: 1px solid #ccc;
                    box-sizing: border-box;
                    > img{
                        max-width: 25%;
                        margin: 5px 0;
                    }
                    >span{
                        font-size: 16px;
                        color: #3DBC28;
                        padding: 5px 0;
                    }
                }
            }
        }
        .home-content{
            position: fixed;
            top: 290px;
            width: 100%;
            .home-show{
                width: 100%;
                //标题
                .shop-title{
                    font-size: 20px;
                    height: 40px;
                    padding: 0 5px;
                    background-color: #3DBC28;
                    margin-top: 5px;
                    line-height: 40px;
                    > span{
                        display: block;
                        color: #fff;
                        padding-left: 40px;
                    }
                    > svg{
                        width: 30px;
                        height: 100%;
                        float: left;
                    }
                }
                //列表展示
                .shop{
                    overflow: hidden;
                   ul{                        
                        li{
                            position: relative;
                            display: flex;
                            padding: 5px;
                            margin-bottom: 10px;
                            //图片
                            .item-img{
                                flex: 1;
                                > img{
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            //信息
                            .item-info{
                                flex: 3;
                                display: flex;
                                flex-direction: column;
                                padding-left: 5px;
                                line-height: 20px;
                                > div{
                                    flex: 1;
                                    display: flex;
                                    text-align: center;
                                    color: #49CB5F;
                                    margin: 3px 0;
                                    > svg{
                                        width: 20px;
                                        height: 20px;

                                    }
                                    > span{
                                        margin-left: 5px;
                                    }                               
                                }

                                //推荐字数
                                .info-xing{
                                    .info-num{
                                        display: flex;
                                        > svg{
                                            width: 20px;
                                            height: 20px;
                                        }
                                    }
                                }
                            }
                            // 点击查看
                            .item-click{
                                flex: 1;
                                text-align: center;
                                display: flex;
                                flex-direction: column;
                                svg{
                                    width: 100%;
                                    height: 50px;
                                }
                                span{
                                    color: #3DBC28;
                                }
                            }
                        }
                        li:last-child{
                           width: 100%;                          
                          div{
                              display: flex;
                              text-align: center;
                              margin: 0 auto;
                              height: 30px;
                              line-height: 30px;
                              > svg{
                                    width: 30px;
                                    height: 30px;
                              }                            
                          }
                        }
                   }
                }
            }
        }

    }
</style>


